<template>
  <div class="init-view">
    <header class="header">
      <img src="/LOGO.png" alt="School Logo" class="logo" />
      <h5 class="school-name">中国计量大学 Web前端开发</h5>
    </header>
    <main class="content">
      <h1>Welcome to Our Website</h1>
      <InitForm />
    </main>
    <footer class="footer">
      <p>版权所有 © 姓名: 陶诗莹, 学号: 2300303105, 电话: 18267333050, 邮箱: 2351922591@qq.com</p>
    </footer>
  </div>
</template>

<script>
import InitForm from '../components/InitForm.vue';

export default {
  name: 'InitView',
  components: {
    InitForm
  }
};
</script>

<style scoped>
.init-view {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
}

.header {
  position: fixed; /* 改为固定位置 */
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1em;
  background-color: #f0f0f0;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.logo {
  width: 50px;
  height: auto;
  margin-right: 0.5em;
}

.school-name {
  margin: 0;
  white-space: nowrap;
}

.content {
  flex: 1;
  padding: 6em 2em 2em; /* 确保内容不被固定的header遮挡 */
  text-align: center;
  overflow-y: auto;
}

.footer {
  padding: 1em;
  background-color: #f0f0f0;
  text-align: center;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}
</style>
